<template>
	<view class="content">
		<!-- 背景色 -->
		<view class="bg-color"></view>
		
		<!-- 手机状态栏高度 -->
		<view class="status_bar">
		</view>
		
		<view class="header">
			<!-- 顶部图标 -->
			<view class="top-icons">
				<view class="icon-item">
					<image src="../../static/mine/settings.png" mode=""></image>
				</view>
				<!-- <view class="icon-item">
					<image src="../../static/mine/saomaa.png" mode=""></image>
				</view> -->
			</view>
			<!-- 用户信息头部 -->
			<view class="user-info">
				<view class="user-header" @click="gotoLogin()">
					<view class="user-header-left">
						<view class="user-name">
							<text>美叶川乐</text>
						</view>
						<view class="user-level">
							<view class="mark">
								<text>信誉极好</text>
							</view>
							<text>小白信用97.6</text>
						</view>
					</view>
					<view class="user-header-right">
						<view class="avater">
							<image src="../../static/logo.png" mode=""></image>
						</view>
					</view>
				</view>
				
				<view class="user-body">
					<view class="data-info">
						<view class="data-info-item">
							
							<view class="baogu">
								<text class="info-text">收藏</text>
								<text class="info-number">0</text>
							</view>
						</view>
						
						<view class="data-info-item">
							
							<view class="baogu">
								<text class="info-text">优惠卷</text>
								<text class="info-number">0</text>
							</view>
						</view>
						
						<view class="data-info-item">
							
							<view class="baogu">
								<text class="info-text">积分</text>
								<text class="info-number">0</text>
							</view>
						</view>
					</view>
				</view>
			</view>
				
			
		</view>
		
		<view class="body">
			<view class="order-body">
				<view class="order-item">
					<view class="item">
						<view class="item-icon">
							<image src="../../static/mine/order/paymoney.png" mode=""></image>
						</view>
						<view class="item-text">
							<text>待付款</text>
						</view>
					</view>
				</view>
				
				<view class="order-item">
					<view class="item">
						<view class="item-icon">
							<image src="../../static/mine/order/souhu.png" mode=""></image>
						</view>
						<view class="item-text">
							<text>待收货</text>
						</view>
					</view>
				</view>
				
				
				<view class="order-item">
					<view class="item">
						<view class="item-icon">
							<image src="../../static/mine/order/touse.png" mode=""></image>
						</view>
						<view class="item-text">
							<text>待使用</text>
						</view>
					</view>
				</view>
				
				<view class="order-item">
					<view class="item">
						<view class="item-icon">
							<image src="../../static/mine/order/orders.png" mode=""></image>
						</view>
						<view class="item-text">
							<text>我的订单</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 二手处理处 -->
			<view class="order-body">
				<view class="order-item">
					<view class="item">
						<view class="item-icon">
							<text>0</text>
						</view>
						<view class="item-text">
							<text>已发布</text>
						</view>
					</view>
				</view>
				
				<view class="order-item">
					<view class="item">
						<view class="item-icon">
							<text>0</text>
						</view>
						<view class="item-text">
							<text>已卖出</text>
						</view>
					</view>
				</view>
				
				
				<view class="order-item">
					<view class="item">
						<view class="item-icon">
							<text>0</text>
						</view>
						<view class="item-text">
							<text>已下架</text>
						</view>
					</view>
				</view>
				
				<view class="order-item">
					<view class="item">
						<view class="item-icon">
							<image src="../../static/mine/order/orders.png" mode=""></image>
						</view>
						<view class="item-text">
							<text>我的闲置</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 常用功能 -->
			<view class="common-function">
				<view class="header-title">
					<text>常用业务</text>
				</view>
				<!-- 业务服务 -->
				<view class="yewu-mygird">
					<mygrid :itemArr="itemArr"></mygrid>
				</view>
			</view>
			
			<!-- 系统服务 -->
			
			<view class="system-function">
				<cmd-cell-item :title="'帮助中心'" :arrow="true" :slot-left="true">
					<my-avater :imgPath="'../../static/mine/system/help.png'"></my-avater>
					
				</cmd-cell-item>
				<cmd-cell-item :title="'防骗指南'" :arrow="true" :slot-left="true">
					<my-avater :imgPath="'../../static/mine/system/zapian.png'"></my-avater>
				</cmd-cell-item>
				<cmd-cell-item :title="'意见与建议'" :arrow="true" :slot-left="true">
					<my-avater :imgPath="'../../static/mine/system/tous.png'"></my-avater>
				</cmd-cell-item>
				<cmd-cell-item :title="'推荐给朋友'" :arrow="true" :slot-left="true">
					<my-avater :imgPath="'../../static/mine/system/fenx.png'"></my-avater>
				</cmd-cell-item>
			</view>
		</view>
	</view>
</template>

<script>
	import Mygrid from '../../components/mygrid.vue'
	import cmdCellItem from '../../components/cmd-cell-item/cmd-cell-item.vue'
	import MyAvater from '../../components/myavater.vue'
	export default {
		components: {
			Mygrid,
			cmdCellItem,
			MyAvater
		},
		data() {
			return {
				itemArr: [
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg",
						text: '超市',
					},
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg.dpg",
						text: '数码电器',
					},
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg.dpg",
						text: '服饰',
					},
					
					{
						url: '',
						icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg",
						text: '生鲜',
					},
					
				],
			}
		},
		methods: {
			gotoLogin() {
				uni.navigateTo({
					url:'../login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rx;
		// 头部背景颜色
		.bg-color {
			width: 100%;
			height: 380rpx;
			position: absolute;
			z-index: -1;
			background-image: linear-gradient(#65d481, #5ec76d);
		}
		
		// 收藏之上的图案
		.header {
			margin: 0 20rpx;
			
			.top-icons {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				.icon-item {
					height: 60rpx;
					width: 60rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			// 用户信息头部
			.user-info {
				width: 100%;
				height: 300rpx;
				background-color: #FFFFFF;
				
				border-radius: 10rpx;
				
				.user-header {
					
					margin: 0 40rpx;
					height: 200rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.user-header-left {
						display: flex;
						flex-direction: column;
						
						.user-name {
							font-weight: 700;
							font-size: 50rpx;
						}
						.user-level {
							margin-top: 10rpx;
							display: flex;
							font-size: 20rpx;
							.mark {
								
								height: 30rpx;
								background-color: #b3945f;
								border-radius: 5rpx;
								display: flex;
								align-items: center;
								text {
									padding: 0 5rpx;
									margin: 0 auto;
									color: #FFFFFF;
								}
							}
							
							text {
								margin-left: 10rpx;
								font-weight: 700;
								color: #b3945f;
							}
							
						}
					}
					
					.user-header-right {
						display: flex;
						align-items: center;
						margin-right: 20rpx;
						.avater {
							width: 120rpx;
							height: 120rpx;
							border-radius: 60rpx;
							overflow: hidden;
							// 给盒子下边框添加阴影
							box-shadow: #ececec 0rpx 20rpx 20rpx;
							image {
								
								width: 100%;
								height: 100%;
							}
						}
					}
				}
				
				.user-body {
					width: 100%;
					margin-top: 30rpx;
					.data-info {
						width: 100%;
						display: flex;
						justify-content: space-around;
						
						.data-info-item {
							width: 33%;
							height: 30rpx;
							// background-color: #007AFF;
						
							display: flex;
							align-items: center;
							
							.baogu {
								margin: 0 auto;
								.info-text {
									color: #333333;
									font-size: 26rpx;
								}
								
								.info-number {
									margin-left: 10rpx;
								}
							}
							
						}
						
						view:nth-child(2) {
							border-left: 2rpx solid #999999;
							border-right: 2rpx solid #999999;
						}
					}
				}
			
			
			}
			
			
		}
		
		.body {
			
			width: 100%;
			
			.order-body {
				margin-top: 30rpx;
				width: 100%;
				height: 150rpx;
				background-color: #FFFFFF;
				display: flex;
				
				.order-item {
					width: 25%;
					height: 100%;
					display: flex;
					align-items: center;
					.item {
						margin: 0 auto;
						display: flex;
						flex-direction: column;
						align-items: center;
						.item-icon {
							display: flex;
							align-items: center;
							width: 50rpx;
							height: 50rpx;
							image {
								width: 100%;
								height: 100%;
							}
							
							text {
								margin: 0 auto;
								font-size: 25rpx;
							}
						}
						.item-text {
							margin-top: 10rpx;
							font-size: 25rpx;
							color: #333333;
						}
					}
					
					
				}
				
				view:nth-child(4) {
					// 给盒子下边框添加阴影 #ececec
					box-shadow: -5rpx 0rpx 10rpx #ececec;
				}
			}
			
			// 常用功能
			.common-function {
				width: 100%;
				margin-top: 30rpx;
				background-color: #FFFFFF;
				.header-title {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 10rpx 0rpx;
					text {
						font-size: 30rpx;
						font-weight: 700;
					}
				}
				
				.yewu-mygird {
					width: 100%;
				}
			}
		
			// 系统服务
			.system-function {
				width: 100%;
				background-color: #FFFFFF;
				margin-top: 30rpx;
				cmd-cell-item {
					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
	}
</style>
